<template>
  <div class="quote">
    <div class="quoteTop">
      <h4 class="var_bgColor">详细信息</h4>

      <div class="query">
        <Row>
          <Col span="6" v-if="dir.sex != 3">
          <label>性别</label>
          <Select size="small" v-model="info.sex" style="width: 50%" :disabled="dir.sex == 2">
            <Option v-for="(item, index) in gender" v-bind:value="index" v-text="item"></Option>
          </Select>
          </Col>

          <Col span="6" v-if="dir.province != 3">
          <label>所在省</label>
          <Select size="small" v-model="info.province" style="width: 50%" :disabled="dir.province == 2"
                  @on-change="proviceChange">
            <Option v-for="item in province" v-bind:value="item.code" v-text="item.name"></Option>
          </Select>
          </Col>

          <Col span="6" v-if="dir.city != 3">
          <label>所在市</label>
          <Select size="small" v-model="info.city" style="width: 50%" :disabled="dir.city == 2"
                  @on-change="cityChange">
            <Option v-for="item in city" v-bind:value="item.code" v-text="item.name"></Option>
          </Select>
          </Col>

          <Col span="6" v-if="dir.county != 3">
          <label>所在区/县</label>
          <Select size="small" v-model="info.county" style="width: 50%" :disabled="dir.county == 2">
            <Option v-for="item in county" v-bind:value="item.code" v-text="item.name"></Option>
          </Select>
          </Col>

        </Row>

        <div style="height: 10px;"></div>

        <Row>

          <Col span="6" v-if="dir.address != 3">
          <label>详细地址</label>
          <Input size="small" style="width: 50%" v-model="info.address" :disabled="dir.address == 2"/>
          </Col>

          <Col span="6" v-if="dir.avatar != 3">
          <label>用户头像</label>
          <Input size="small" style="width: 50%" v-model="info.avatar" :disabled="dir.avatar == 2"> </Input>
          </Col>

          <Col span="6" v-if="dir.nickName != 3">
          <label>昵称</label>
          <Input size="small" style="width: 50%" v-model="info.nickName" :disabled="dir.nickName == 2"> </Input>
          </Col>

          <Col span="6" v-if="dir.birthday != 3">
          <label>生日</label>
          <Date-picker size="small" style="width: 50%" type="date" v-model="info.birthday"
                       :disabled="dir.birthday == 2"></Date-picker>
          </Col>

        </Row>

        <div style="height: 10px;"></div>

        <Row>

          <Col span="6" v-if="dir.email != 3">
          <label>邮箱</label>
          <Input size="small" style="width: 50%" v-model="info.email" :disabled="dir.email == 2"> </Input>
          </Col>

          <Col span="6" v-if="dir.remark != 3">
          <label>备注</label>
          <Input size="small" style="width: 50%" v-model="info.remark" :disabled="dir.remark == 2" type="textarea" placeholder="请输入备注"></Input>
          </Col>

        </Row>

      </div>
    </div>
  </div>
</template>

<script>

  import api from '../../../utils/api.js'
  import {queryROLE, queryPartnerId, queryPartnerName} from '../../../utils/common.js';
  import reqDic from '../../../utils/requestDictionary.js';

  export default{
    props: {
      info: {
        type: Object,
      },
      gender: {
        type: Object,
      },
      id: {
        type: String,
      }
    },
    created: function () {

      this.myRole = queryROLE();

      if (this.myRole == 1) {

        if (this.id == -1) {
          this.dir = {
            'sex': 1,
            'province': 1,
            'city': 1,
            'county': 1,
            'address': 1,
            'avatar': 1,
            'nickName': 1,
            'birthday': 1,
            'email': 1,
            'remark': 1,
          }
        } else {
          this.dir = {
            'sex': 1,
            'province': 1,
            'city': 1,
            'county': 1,
            'address': 1,
            'avatar': 2,
            'nickName': 1,
            'birthday': 1,
            'email': 1,
            'remark': 1,
          }
        }

      } else {
        this.dir = {
          'sex': 1,
          'province': 1,
          'city': 1,
          'county': 1,
          'address': 1,
          'avatar': 2,
          'nickName': 1,
          'birthday': 1,
          'email': 1,
          'remark': 1,
        }
      }

      if(this.id === '-1'){
        this.getProvinceInfoList("0");
      }

    },

    updated: function () {

      console.log("详细信息", this.info);


      if (!this.isLoadedProvince) {
        this.isLoadedProvince = true;
        this.getProvinceInfoList("0");
      }

    },
    data: function () {
      return {
        dir: {},
        myRole: '',

        province: [],
        city: [],
        county: [],

        isLoadedProvince: false,
        isLoadedCity: false,
        isLoadedCounty: false,
        isCount: false,

        queryNum: 1,

        test: 1,

        realInfo: {},
      }
    },
    methods: {

      proviceChange: function () {

        this.county = [];

        this.getCityInfoList(this.info.province);

      },

      cityChange: function () {

        console.log("city:" + this.info.city);

        this.getCountyInfoList(this.info.city);

      },

      getProvinceInfoList: function getAddressInfoList(code) {

        var self = this;

        api.getAddressInfo(code).then((res) => {
          self.province = res.body.data;
          self.realInfo = self.info;
        })
      },

      getCityInfoList: function getCityInfoList(code) {

        var self = this;

        code && api.getAddressInfo(code).then((res) => {
          self.city = res.body.data;
        })
      },

      getCountyInfoList: function getCountyInfoList(code) {

        var self = this;

        code && api.getAddressInfo(code).then((res) => {
          self.county = res.body.data;
        })
      },

    }
  }

</script>
